<template>
  <div class="discord-detail-container">
    <div class="max-w-8xl mx-auto px-4 pt-5 pb-8">
      <div class="breadcrumbs space-x-2 text-base flex flex-wrap items-center mb-5">
        <common-link path="/"
          class="text-gray-1000 hover:text-purple-1200 go-home">
          {{$t('home')}}
        </common-link>
        <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
          iconName='right_outlined'></svg-icon>
        <common-link path="/discord"
          class="text-gray-1000 hover:text-purple-1200 go-prev">
          {{$t('discord_discordOfAI')}}
        </common-link>
        <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
          iconName='right_outlined'></svg-icon>
        <span class="text-gray-1400 text-base">
          {{$t('discord_nameDiscord',{name: discord.name})}}
        </span>
      </div>

      <div class="discord-box px-4 pt-6 sm:px-6">
        <div class="flex items-center gap-4">
          <div class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden">
            <common-image class="w-full h-full"
              :src="discord.avatar"
              :alt="discord.name"></common-image>
          </div>
          <div class="flex-1 w-0">
            <h1 class="text-2xl text-gray-1000 font-semibold truncate">{{$t('discord_nameDiscord',{name: discord.name})}}</h1>
            <p class="text-md text-gray-1000 break-words"
              v-if="hasRealVal(discord.description)">
              {{discord.description}}
            </p>
          </div>
        </div>
        <div class="h-px bg-gray-2000 mt-5"></div>
        <div class="flex items-center justify-between flex-wrap gap-x-8 gap-y-4 py-6">
          <div class="w-full lg:w-auto lg:flex-1 flex justify-around lg:justify-start items-center gap-x-8 gap-y-4 flex-wrap text-center">
            <div class="flex-shrink-0">
              <div class="text-md text-gray-1000">{{$t('discord_members')}}</div>
              <p class="text-lg text-gray-1000 font-semibold leading-5 mt-1">{{hasRealVal(discord.user_num) ? $vReset(discord.user_num) : '--'}}</p>
            </div>
            <div class="flex-shrink-0">
              <div class="text-md text-gray-1000">{{$t('discord_code')}}</div>
              <p class="text-lg text-gray-1000 font-semibold leading-5 mt-1">{{hasRealVal(discord.discord_code) ? discord.discord_code : '--'}}</p>
            </div>
            <div class="flex-shrink-0">
              <div class="text-md text-gray-1000">{{$t('discord_premiumSubscription')}}</div>
              <p class="text-lg text-gray-1000 font-semibold leading-5 mt-1">{{hasRealVal(discord.premium_subscription_count) ? $vReset(discord.premium_subscription_count) : '--'}}</p>
            </div>
            <div class="flex-shrink-0">
              <div class="text-md text-gray-1000">{{$t('discord_7DayAvgOnlineUsers')}}</div>
              <p class="text-lg text-gray-1000 font-semibold leading-5 mt-1">{{hasRealVal(discord.online_num_7) ? $vReset(discord.online_num_7) : '--'}}</p>
            </div>
          </div>
          <a :href="discord.discord"
            :alt="discord.name"
            rel="nofollow"
            target="_blank"
            class="flex h-12 items-center justify-center text-center flex-shrink-0 bg-purple-1300 rounded-full px-11 text-md sm:text-base text-white hover:opacity-90 mx-auto max-w-full">{{$t('discord_accessToNameDiscord',{name: discord.name})}}</a>
        </div>
      </div>

      <div class="mt-12 space-y-12 note-list">
        <div class="note-item"
          v-if="discord.tool_website && discord.tool_website.core_features">
          <h2 class="text-2xl text-gray-1000 font-semibold"
            v-html="$t('discord_discordFeatures',{name: discord.name,link: discord.tool_website && discord.tool_website.handle ? `${locale==='en'?'':`/${locale}`}/tool/${discord.tool_website.handle}`:''})"></h2>
          <div class="mt-5 space-y-2.5">
            <p class="text-base text-gray-1000"
              v-for="(item, index) in discord.tool_website.core_features">{{item}}</p>
          </div>
        </div>
        <div class="note-item">
          <h2 class="text-2xl text-gray-1000 font-semibold">{{$t('discord_officialDiscordServer',{name: discord.name})}}</h2>
          <div class="mt-5 space-y-2.5">
            <p class="text-base text-gray-1000">{{$t('discord_clickTheLinkDiscordServer',{name: $t('discord_officialDiscordServer',{name: discord.name})})}}</p>
            <p class="text-base">
              <a :href="discord.discord"
                rel="nofollow"
                :alt="discord.name"
                target="_blank"
                class="text-blue-1800 hover:text-blue-1400">{{discord.discord}}</a>
            </p>
          </div>
        </div>
        <div class="note-item"
          v-if="hasRealVal(discord.discord_code)">
          <h2 class="text-2xl text-gray-1000 font-semibold">{{$t('discord_dscordLogin',{name: discord.name})}}</h2>
          <div class="mt-5 space-y-2.5">
            <p class="text-base text-gray-1000">{{$t('discord_clickTheLinkDiscorLlogin',{name: $t('discord_dscordLogin',{name: discord.name})})}}</p>
            <p class="text-base">
              <a :href="`https://discord.com/invite/${discord.discord_code}/login`"
                rel="nofollow"
                :alt="discord.name"
                target="_blank"
                class="text-blue-1800 hover:text-blue-1400">{{`https://discord.com/invite/${discord.discord_code}/login`}}</a>
            </p>
          </div>
        </div>
        <div class="note-item">
          <h2 class="text-2xl text-gray-1000 font-semibold">{{$t('discord_discordBot',{name: discord.name})}}</h2>
          <div class="mt-5 space-y-2.5">
            <p class="text-base text-gray-1000">{{$t('discord_clickTheLinkDiscordBot',{name: $t('discord_discordBot',{name: discord.name})})}}</p>
            <p class="text-base">
              <a :href="discord.discord"
                rel="nofollow"
                :alt="discord.name"
                target="_blank"
                class="text-blue-1800 hover:text-blue-1400">{{discord.discord}}</a>
            </p>
          </div>
        </div>
      </div>

      <div class="h-px bg-gray-2000 my-14"></div>

      <discord-traffic :discord="discord"
        :discordName="discord.name"></discord-traffic>
      <discord-faq :discord="discord"
        :discordName="discord.name"
        class="mt-24"></discord-faq>

      <discord-other class="mt-12"
        v-if="discord && discord.next_and_last_name && Array.isArray(discord.next_and_last_name) && discord.next_and_last_name.length > 0"
        :next_and_last_name="discord.next_and_last_name"></discord-other>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  name: 'DiscordDetail',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
        {
          hid: 'og:image:alt',
          name: 'og:image:alt',
          content: this.title,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],

      script: [
        {
          json: {
            '@context': 'https://schema.org',
            '@type': 'SoftwareApplication',
            name: this.discord.name,
            applicationCategory: 'UtilitiesApplication',
            operatingSystem: 'All',
            aggregateRating: {
              '@type': 'AggregateRating',
              ratingValue: '5',
              ratingCount: '8864',
            },
            offers: {
              '@type': 'Offer',
              price: '0',
              priceCurrency: 'USD',
            },
            headline: this.title,
            image: [
              this.discord.avatar
                ? this.discord.avatar
                : 'https://cdn.toolify.ai/default.webp',
            ],
            dateModified: this.discord.updated_at
              ? moment(this.discord.updated_at * 1000).format(
                  'YYYY-MM-DDTHH:mm:ssZ'
                )
              : null,
            datePublished: this.discord.created_at
              ? moment(this.discord.created_at * 1000).format(
                  'YYYY-MM-DDTHH:mm:ssZ'
                )
              : null,
            author: {
              '@type': 'Organization',
              name: 'toolify',
              url: 'https://www.toolify.ai',
            },
            description: this.description,
            articleSection: 'Technology',
            mainEntityOfPage: `https://www.toolify.ai${this.$route.fullPath}`,
            publisher: {
              '@context': 'https://www.toolify.ai',
              '@type': 'Organization',
              name: 'Toolify',
              legalName: 'Toolify Inc',
              url: 'https://www.toolify.ai',
              logo: 'https://www.toolify.ai/favicon.ico',
              foundingDate: '2023',
              founders: [
                {
                  '@type': 'Organization',
                  name: 'toolify',
                },
              ],
              address: {
                '@type': 'PostalAddress',
                streetAddress: '1942 Broadway St STE 314C Boulder',
                addressLocality: 'Colorado',
                addressRegion: 'CO',
                postalCode: '80302',
                addressCountry: 'US',
              },
              contactPoint: {
                '@type': 'ContactPoint',
                contactType: 'customer support',
                email: 'business@toolify.ai',
              },
              sameAs: ['https://twitter.com/samChan3890089'],
            },
            name: this.title,
            breadcrumb: {
              '@type': 'BreadCrumbList',
              itemListElement: [
                {
                  '@type': 'ListItem',
                  position: 1,
                  name: this.$t('home'),
                  item: `https://www.toolify.ai${
                    this.locale === 'en' ? '' : `/${this.locale}`
                  }`,
                },
                {
                  '@type': 'ListItem',
                  position: 2,
                  name: this.$t('discord_discordOfAI'),
                  item: `https://www.toolify.ai${
                    this.locale === 'en' ? '' : `/${this.locale}`
                  }/discord`,
                },
                {
                  '@type': 'ListItem',
                  position: 3,
                  name: this.$t('discord_nameDiscord', {
                    name: this.discord.name,
                  }),
                },
              ],
            },
            mainEntity: this.faqArr,
          },
          type: 'application/ld+json',
        },
      ],
    }
  },
  async asyncData({ app, route, params, $axiosApi, error, store }) {
    try {
      let [result] = await Promise.all([
        $axiosApi.getDiscordDetail({
          discord_handle: params.handle,
        }),
      ])

      let discord = null

      if (result.code === 200) {
        discord = result.data.data
      } else {
        if (articleRes && articleRes.code && articleRes.code === 404) {
          error({ statusCode: 404 })
        } else if (
          !(articleRes && articleRes.code && articleRes.code === 401)
        ) {
          error({
            message: app.i18n.t('error_401'),
            statusCode: articleRes.code,
          })
        }
      }

      let title = app.i18n.t('discord_pageDetail_title', {
        name: discord && discord.name ? discord.name : '',
      })
      let description = app.i18n.t('discord_pageDetail_detail', {
        name: discord && discord.name ? discord.name : '',
      })

      let faqArr = []
      let faqs = [
        {
          question: 'discord_whatIsName',
          answer: [
            {
              type: 'key',
              value: 'what_is',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatThingsCanIDo',
          answer: [
            {
              type: 'key',
              value: 'use_cases',
            },
          ],
          show: false,
        },
        {
          question: 'discord_doesNameHave',
          answer: [
            {
              type: 'text',
              value: 'discord_yesNameHave',
            },
          ],
          show: false,
        },
        {
          question: 'discord_isNameDiscordFree',
          answer: [
            {
              type: 'text',
              value: 'discord_yesTheNameDiscord',
              extra: 'discord_butHave',
            },
          ],
          show: false,
        },
        {
          question: 'discord_howToUse',
          answer: [
            {
              type: 'key',
              value: 'how_to_use',
            },
            {
              type: 'text',
              value: 'discord_joinTheNameDiscord',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatIsTheNameDiscordBot',
          answer: [
            {
              type: 'text',
              value: 'discord_thereIsTheNameDiscordBot',
            },
            {
              type: 'link',
              value: 'discord',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatIsTheNameDiscordPrice',
          answer: [
            {
              type: 'text',
              value: 'discord_mostOfTheNameDiscords',
            },
          ],
          show: false,
        },
        {
          question: 'discord_howToGetNameDiscord',
          answer: [
            {
              type: 'text',
              value: 'discord_youCanFind',
            },
          ],
          show: false,
        },
      ]

      function removeHtmlTags(str) {
        return str.replace(/<[^>]*>/g, '')
      }

      let discordName = discord && discord.name ? discord.name : ''
      faqs.forEach((item) => {
        let question = app.i18n.t(item.question, {
          name: discordName,
        })
        let answer = ''
        item.answer.forEach((titem) => {
          if (titem.type === 'text') {
            answer += `${app.i18n.t(titem.value, {
              name: discordName,
              link: discord.discord,
            })} ${
              titem.extra && discord.premium_subscription_count
                ? app.i18n.t(titem.extra, {
                    num: discord.premium_subscription_count,
                  })
                : ''
            }`
          } else if (titem.type === 'link') {
            answer += discord[titem.value]
          } else if (
            titem.type === 'key' &&
            discord.tool_website &&
            discord.tool_website[titem.value]
          ) {
            answer += `${
              typeof discord.tool_website[titem.value] === 'string'
                ? discord.tool_website[titem.value]
                : Array.isArray(discord.tool_website[titem.value])
                ? discord.tool_website[titem.value].join(', ')
                : ''
            }`
          }
        })

        faqArr.push({
          '@type': 'Question',
          name: question,
          acceptedAnswer: {
            '@type': 'Answer',
            text: removeHtmlTags(answer),
          },
        })
      })

      return {
        discord,
        title,
        description,
        faqArr,
      }
    } catch (err) {
      console.log(err)
    }
  },

  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      description: null,
      title: null,
      discord: {},
      faqArr: [],
    }
  },
}
</script>

<style lang='scss' scoped>
.discord-detail-container {
  background: #fff;
  ::v-deep .common-square-sort {
    .dropdown {
      height: 42px;
      min-width: 220px;
    }
  }
  ::v-deep .el-divider__text {
    background-color: #f8f9fb;
  }

  .bg-gray-linear {
    background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
  }
  .discord-box {
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    border: 1px solid #e5e5e5;
  }
  .note-list {
    .note-item {
      position: relative;
      padding-left: 16px;
      &::before {
        position: absolute;
        left: 0;
        top: 11px;
        display: block;
        content: '';
        background-color: #7150e6;
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    }
  }
}
</style>
